<template>
  <div class="manageInfo">
    <van-button round type="success">经营概览</van-button>
    <div class="manageInfo-financialTarget">
      <van-button round type="info">财务指标</van-button>
      <div class="manageInfo-financialTarget--content">
        <sum 
          :config="data.manageFinanciaSumConfig"
          :formData="data.manageFinanciaSumFormData"
        ></sum>
      </div>
    </div>
    <div class="manageInfo-financialTarget">
      <van-button round type="info">运营指标</van-button>
      <div class="manageInfo-financialTarget--content">
        <sum 
          :formData="data.manageOperationalTargetFormData"
          :config="data.manageOperationalTarget"
        ></sum>
      </div>
    </div>
    <van-button round type="success">财务指标</van-button>
    <div class="manageInfo-financialTarget--content">
      <sum 
        :config="data.manageFinanciaSumConfig"
        :formData="data.manageFinanciaSumFormData"
      ></sum>
      <bar
        ref="financia"
        :option=" [
          {
            name: '每月应收',
            prop: 'receivableAmount'
          },
          {
            name: '实收',
            prop: 'receivedAmount'
          },
          {
            name: '收缴率',
            prop: 'collectedRate'
          },
        ]"
      ></bar>
      <ysnTable
        style="width: 100%;margin-top: 2.4rem;margin-bottom: 2.8rem;"
        :data="data.financiaTableData"
        :column="data.financiaTableConfig"
      ></ysnTable>
    </div>
    <van-button round type="success">运营指标</van-button>
    <div class="manageInfo-financialTarget--content">
      <sum 
        :formData="data.operationalTargetFormData"
        :config="data.operationalTarget"
      ></sum>
      <bar
        :option=" [
          {
            name: '租赁',
            prop: 'rentedArea'
          },
          {
            name: '空置',
            prop: 'vacantArea'
          },
          {
            name: '出租率',
            prop: 'rentedRate'
          },
        ]"
        ref="financialTarget"
      ></bar>
      <ysnTable
        style="width: 100%;margin-top: 2.4rem;margin-bottom: 2.8rem;"
        :data="data.operationalTargetTableData"
        :column="data.operationalTargetTableConfig"
      >
      </ysnTable>
    </div>

  </div>
</template>
<script setup lang="ts">
import { config } from './config'
import { onActivated, reactive, ref } from "vue";
import bar from "@/components/echarts/bar/index.vue";
import { ManageInfoApi } from '@/api/manageInfo';
const financia = ref()
const financialTarget = ref()
let data = reactive({
  manageFinanciaSumFormData: {},
  manageFinanciaSumConfig:[],
  manageOperationalTargetFormData: {},
  manageOperationalTarget:[],
  financiaTableConfig:[],
  financiaTableData:[],
  operationalTargetFormData:[],
  operationalTarget:[],
  operationalTargetTableData:[],
  operationalTargetTableConfig:[]
})
config(data)

init()
function init(){
  Promise.all([
    ManageInfoApi.financeIndex(),
    ManageInfoApi.operateIndex(),
    ManageInfoApi.coreIndex()
  ]).then(res => {
    res.forEach((val, index: number) => {
      switch (index) {
        case 0:
          data.manageFinanciaSumFormData = val
          data.financiaTableData = val.companyList
          financia.value.init(val.monthList)
          break;
        case 1:
          data.operationalTargetFormData = val
          data.operationalTargetTableData = val.companyList
          financialTarget.value.init(val.monthList)
          break;
        case 2:
          data.manageOperationalTargetFormData = val
          break;
      
        default:
          break;
      }
    });
  })
}

onActivated(() => {
  init()
})

</script>
<style lang="scss">
.manageInfo{
  &-financialTarget{
    margin-top: 1.7rem;
    
    &--content{
      padding: 1.7rem 0.9rem 0;
    }
  }
}
</style>